<template>
  <!-- 最外层包裹的 div 容器 -->
  <div class="rightContent">

    <!-- 顶部title  和 退出按钮包裹的 div 的容器 -->
    <div class="topTite">
        <span>学生列表</span>
        <el-button  type="info" @click= "logoutEvent" plain>Logout</el-button>
    </div>
    <!-- 清除浮动 -->
    <div class="clearFix"></div>
    <!-- 设置 主要内容列表  卡片容器 -->
    <el-card class="box-card" shadow="never">

      <!-- 设置搜索 添加用户信息 -->
      <el-row :gutter="20" class="addUser">
        <el-col :span="14"> <!-- 设置搜索框 -->
          <el-input placeholder="请输入姓名(按姓名搜索)" v-model="inputValue" ref="searchInput"
          clearable  @keyup.13.native= "clickEnterEvent" @change= "valueChangeEvent">
            <el-button slot="append" icon="el-icon-search" @click = 'searchEvent'></el-button>
          </el-input>
        </el-col>
  
        <el-col :span="10" class="addBtnContainer"> <!-- 添加用户信息 -->
          <el-button class="addUserBtn" type="primary" @click= "addUser">添加</el-button>
        </el-col>
      </el-row>

      <!-- 设置列表内容 -->
      <el-table :data="tableData" style="width:100%" stripe border>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="stu_no" label="学号"> </el-table-column>
        <el-table-column prop="create_date" label="创建日期"> </el-table-column>
        <el-table-column prop="modify_date" label="修改日期"> </el-table-column>
        <el-table-column label="激活状态" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.active"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switchEvent(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="editEvent(scope.row)" type="primary" size="mini" plain>编辑</el-button>
            <el-button @click="deleteEvent(scope.row)" type="danger" size="mini" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 设置分页 -->
    <el-pagination
      :current-page= "currentpage"
      :page-sizes= "[5, 10, 15, 20]"
      :page-size= "getStudentsModel.page_size"
      layout= "total, sizes, prev, pager, next, jumper"
      :total = "totalCount"
      @current-change = "handleCurrentChange"
      @size-change = "handleSizeChange" >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取列表参数对象
      getStudentsModel: {
        token: "",
        name: "",
        stu_no: "",
        page_count: 0,
        page_size: 10
      },
      // 更新学生状态参数对象
      upStudentStatus: {
        id: "",
        token: ""
      },
      changeModel: {},
      switchStatus: false,
      inputValue:'',

      formLabelWidth: "120px",
      tableData: [],
      totalCount:0,
      currentpage:1,
    };
  },
  methods: {
    //添加用户
    addUser() {
      // console.log("我来添加数据了");
      // 添加数据不需要请求参数
      this.$router.push({name:'Upload',query:{source:'add'}})
    },
    // 编辑单条信息
    editEvent(item) {
      //传递参数给下个页面请求使用
      this.$router.push({name:'Upload',query:{source:'edit',stuid:item.stu_id}})
    },
    // 删除单条信息
    async deleteEvent(model) {
      var paramDic = {
        id:model.stu_id,
        token:window.sessionStorage.getItem('token')
      };
      const {data:res} = await this.$http1(this.$urls.DeleteStudent,paramDic);
      if(res.Code !== 10000) return this.$message.error(res.Message);
      this.$message.success('successfully delete');
      this.getUserListData();
    },
    // 获取列表数据
    async getUserListData() {
      // //获取token数据
      const token = window.sessionStorage.getItem("token");
      // //给定义的数据赋值操作
      this.getStudentsModel.token = token;
      //准备url  请求参数   回调函数
      var getStuListUrl = this.$urls.StudentList;
      const { data: res } = await this.$http1(getStuListUrl, this.getStudentsModel);
      if(res.Code !== 10000) return this.$message.error(res.Message);
 
      var datas = res.Result.Data;
      this.tableData = datas;
      this.totalCount = res.Result.total_count;
    },
    // 定义点击更新状态的事件
    async switchEvent(model) {
      console.log("点击更新状态model.name == " + model.name);
      this.upStudentStatus.token = window.sessionStorage.getItem("token");
      this.upStudentStatus.id = model.stu_id;
      // 发起请求更新学生状态
      const { data: res } = await this.$http1(
        this.$urls.UpStuStatus,
        this.upStudentStatus
      );
      if (res.Code !== 10000) return this.$message.error("状态激活失败");
      this.$message.success("激活成功");
    },
    // 改变当前页码
    handleCurrentChange(val) {
      console.log('当前第'+ val + '页');
      this.currentpage = val;
      this.getStudentsModel.page_count = this.currentpage - 1;
      this.getUserListData();
    },
    //改变一页多少条数据
    handleSizeChange(val) {
      console.log('每页'+ val + '条数据');
      this.getStudentsModel.page_size = val;
      this.getUserListData();
    },
    //用户退出登录
    logoutEvent() {
        window.sessionStorage.clear();
        this.$router.push({path:'/transcripts/login'})
    },
    //用户搜索 (点击按钮搜索)
    searchEvent(){
        if(!this.inputValue) return;
        this.getStudentsModel.name = this.inputValue;
        this.getStudentsModel.page_count = 0;
        this.getUserListData();
    },
    //用户点击enter键 搜索事件
    clickEnterEvent() {
      console.log('用户点击enter键 搜索事件');
      this.$refs.searchInput.blur();
      this.searchEvent();
    },
    //change方法 在点击enter 或者失去焦点的时候触发
    valueChangeEvent() {
      console.log('change方法 在点击enter 或者失去焦点的时候触发');
      if(!this.inputValue){ //用户清除搜素数据 (点击清除后焦点失去后也会触发change方法)
        this.getStudentsModel.name = '';
        this.getStudentsModel.page_count = this.currentpage - 1;
        this.getUserListData();
      };
    }
  },
  // 创建模板完成
  created() {
    console.log("进页面加载列表数据");
    this.getUserListData();
  },
};
</script>

<style>
.rightContent {
  /* padding: 8px; */
  overflow-y:scroll;
  background-color: #EAEDF2;
  height: 100%;
}
.topTite {
    margin-top: 7px;
    float: left;
    width: 100%;
}
.topTite>span {
    float: left;
    margin: 10px 50px;
    font-size: 20px;
    font-weight: bold;
}
.topTite>button {
    float: right;
    padding: 10px 20px; 
    margin-top: 5px;
    margin-right: 50px;
}
.clearFix {
    clear: both;
}
.box-card {
  margin: 8px 50px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.addUser {
  margin: 15px;
}
.addUserBtn {
  padding: 12px 30px;
}
.addBtnContainer {
  text-align: right;
}
.el-pagination {
  margin-top: 15px;
  margin-bottom: 50px;
}
</style>
